import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import { useEffect } from 'react'

const data = [
  {
    "id": 1,
    "name": "用户管理",
    "pid": 0,
    "children": [
      {
        "id": 4,
        "name": "用户删除",
        "pid": 1,
        "children": []
      },
      {
        "id": 5,
        "name": "用户添加",
        "pid": 1,
        "children": [
          {
            "id": 11,
            "name": "用户角色",
            "pid": 5,
            "children": []
          }
        ]
      },
      {
        "id": 6,
        "name": "用户更新",
        "pid": 1,
        "children": []
      }
    ]
  },
  {
    "id": 2,
    "name": "角色管理",
    "pid": 0,
    "children": [
      {
        "id": 7,
        "name": "角色添加",
        "pid": 2,
        "children": []
      },
      {
        "id": 8,
        "name": "角色更新",
        "pid": 2,
        "children": []
      }
    ]
  },
  {
    "id": 3,
    "name": "菜单管理",
    "pid": 12,
    "children": [
      {
        "id": 9,
        "name": "菜单添加",
        "pid": 3,
        "children": []
      },
      {
        "id": 10,
        "name": "菜单更新",
        "pid": 3,
        "children": []
      }
    ]
  }
]

const code1 = `
  [
    {
      "id": 1,
      "name": "用户管理",
      "pid": 0,
      "children": [
        {
          "id": 4,
          "name": "用户删除",
          "pid": 1,
          "children": []
        },
        {
          "id": 5,
          "name": "用户添加",
          "pid": 1,
          "children": [
            {
              "id": 11,
              "name": "用户角色",
              "pid": 5,
              "children": []
            }
          ]
        },
        {
          "id": 6,
          "name": "用户更新",
          "pid": 1,
          "children": []
        }
      ]
    },
    {
      "id": 2,
      "name": "角色管理",
      "pid": 0,
      "children": [
        {
          "id": 7,
          "name": "角色添加",
          "pid": 2,
          "children": []
        },
        {
          "id": 8,
          "name": "角色更新",
          "pid": 2,
          "children": []
        }
      ]
    },
    {
      "id": 3,
      "name": "菜单管理",
      "pid": 12,
      "children": [
        {
          "id": 9,
          "name": "菜单添加",
          "pid": 3,
          "children": []
        },
        {
          "id": 10,
          "name": "菜单更新",
          "pid": 3,
          "children": []
        }
      ]
    }
  ]
`

const code2 = `
  const arrayToFlatten = () => {
    const result = []

    const setData = (dataObj) => {
      const { children, ...nodeData } = dataObj
      result.push(nodeData)

      if (Array.isArray(children) && 0 in children) {
        children.forEach(child => setData(child))
      }
    }

    data.forEach(item => setData(item))

    console.log('result', result)
  }
`

function Flatten() {

  const arrayToFlatten = () => {
    const result = []

    const setData = (dataObj) => {
      const { children, ...nodeData } = dataObj
      result.push(nodeData)

      if (Array.isArray(children) && 0 in children) {
        children.forEach(child => setData(child))
      }
    }

    data.forEach(item => setData(item))

    console.log('result', result)
  }

  useEffect(() => {
    arrayToFlatten()
  }, [])

  return (
    <div>
      <p>将下列数据平铺</p>
      <SyntaxHighlighter children={code1} />
      <p>代码逻辑：</p>
      <SyntaxHighlighter children={code2} />
    </div>
  )
}

export default Flatten